<!DOCTYPE html>
<html lang="zh-CN" style="overflow: hidden;" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org" layout:decorate="~{shared/layout.html}">

<head>
    <title th:text="${'首页 - '+ title}"></title>
    <!--菜单-->
    <link href="/admin/hzyAdminUI/libs/metismenu-master/metisMenu.min.css" rel="stylesheet"/>
    <!--选项卡-->
    <link href="/admin/hzyAdminUI/libs/hzyBootStrapTabs/index.css" rel="stylesheet"/>
</head>

<body>
<th:block layout:fragment="body">
    <div class="hzy-container" id="hzy-container">
        <header class="hzy-header-skin-blue">
            <div class="hzy-header-left">
                <ul>
                    <!--fas fa-indent-->
                    <li class="hzy-headerhover" onclick="hzyAdminUI.menu.toggle();"><a href="javascript:void(0)"><i
                            class="fas fa-outdent"></i></a></li>
                    <li class="hzy-headerhover hzy-logo"><a th:text="${title}"></a></li>
                </ul>
            </div>
            <div class="hzy-header-right d-none d-lg-block">
                <ul>
                    <li class="hzy-headerhover" onclick="hzyBootStrapTabs.loadCurrentPage()">
                        <a href="javascript:;"><i class="fas fa-redo"></i></a>
                    </li>
                    <li class="hzy-headerhover" onclick="$('#examplePositionSidebar').modal()">
                        <a href="javascript:;"><i class="fas fa-layer-group"></i></a>
                    </li>
                    <!--fa fa-compress-->
                    <li class="hzy-headerhover">
                        <a href="javascript:;" onclick="hzyAdminUI.fullScreen.handleFullScreen(this)">
                            <i class="fas fa-expand"></i></a>
                    </li>
                    <li class="hzy-headerhover">
                        <a href="javascript:;" onclick="logOut()">
                            <span th:text="${'登录人：' + user.name}"></span>
                            <i class="fas fa-sign-out-alt"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="hzy-header-right d-lg-none">
                <ul>
                    <li class="hzy-headerhover"><a href="javascript:;" onclick="logOut()"><i
                            class="fas fa-sign-out-alt"></i></a>
                    </li>
                </ul>
            </div>
        </header>
        <main>
            <th:block th:fragment="loadMenus(childrens)">

                <th:block th:each="item : ${childrens}">

                    <!--判断是否 有 子集-->
                    <th:block th:if="${#lists.isEmpty(item.get('children'))}">
                        <li th:hzy-id="${item.get('id')}" th:hzy-title="${item.get('name')}"
                            th:hzy-href="${item.get('path')}">
                            <a href="javascript:;">
                                <i th:class="${item.get('icon')}"></i><span th:text="${item.get('name')}"></span>
                            </a>
                        </li>
                    </th:block>
                    <th:block th:unless="${#lists.isEmpty(item.get('children'))}">
                        <li>
                            <a href="javascript:;" class="has-arrow" aria-expanded="false">
                                <i th:class="${item.get('icon')}"></i><span th:text="${item.get('name')}"></span>
                            </a>
                            <ul class="mm-collapse">
                                <th:block th:include="this::loadMenus(${item.get('children')})"></th:block>
                            </ul>
                        </li>
                    </th:block>

                </th:block>

            </th:block>

            <!--menu 菜单-->
            <nav class="hzy-menu sidebar-nav sidebar-nav-max">
                <ul class="metismenu" id="hzyAdminMenu" th:include="this::loadMenus(${menus})">
                    <!--递归菜单树-->
                </ul>
            </nav>
            <section class="hzy-main-right" id="hzyAdminTabs"></section>
        </main>
    </div>

    <!--皮肤模态框-->
    <div class="modal fade" id="examplePositionSidebar" aria-hidden="true" aria-labelledby="examplePositionSidebar"
         role="dialog" tabindex="-1">
        <div class="modal-dialog modal-sidebar modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">皮肤设置</h3>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>顶部颜色：</label>
                            <div class="row">
                                <ul class="list-unstyled list-inline" style="text-align: left;">
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-white"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-white')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-blue"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-blue')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-dark"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-dark')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-primary"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-primary')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-cyan"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-cyan')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-green"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-green')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-indigo"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-indigo')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-grey"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-grey')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-pink"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-pink')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-purple"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-purple')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-red"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-red')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-teal"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-teal')"></div>
                                    </li>
                                    <li class="pr-5 pl-5 inline-block">
                                        <div class="index-skin hzy-header-skin-orange"
                                             onclick="hzyAdminUI.header.setSkin('hzy-header-skin-orange')"></div>
                                    </li>
                                </ul>
                            </div>

                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">左侧菜单颜色：</label>
                            <div class="row">
                                <div class="col-sm-12 hzy-skin hzy-skin-default"
                                     onclick="hzyAdminUI.menu.setSkin(hzyAdminUI.menu.mSkin.default)"></div>
                                <div class="col-sm-12 hzy-skin hzy-skin-white"
                                     onclick="hzyAdminUI.menu.setSkin(hzyAdminUI.menu.mSkin.white)"></div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--metisMenu 菜单-->
    <script src="/admin/hzyAdminUI/libs/metismenu-master/metisMenu.min.js"></script>
    <!--选项卡-->
    <script src="/admin/hzyAdminUI/libs/hzyBootStrapTabs/index.js"></script>
    <!--主页面-->
    <script src="/admin/hzyAdminUI/js/hzyAdminUI.js"></script>
    <script type="text/javascript">
        hzyAdminUI.init();
        //初始化多标签页框架
        hzyBootStrapTabs.init("#hzyAdminTabs", [{
            id: '0b7f8e2c-9faa-4496-9068-80b87ba1b64e',
            title: '首页',
            href: '/admin/home',
            active: true,
            isClose: false
        }], function (obj) {
            hzyAdminUI.menu.active(obj.id);
        }, function () {
            hzyAdmin.loading.start();
        }, function () {
            hzyAdmin.loading.stop();
        });

        //退出登录
        function logOut() {
            //清除 cookie
            hzyAdmin.delCookie(hzyAdmin.getTokenKey());
            top.window.location = '/admin/login';
        }
    </script>
</th:block>

</body>

</html>